iT邦幫忙

DAY 16
1

HTML5 & CSS3系列 第 16

30天分享(18) - 行內元素 & 區塊元素

  • 分享至 

  • xImage
  •  

30天分享(18) - 行內元素 & 區塊元素

CSS 的行內元素與區塊元素有不同的規則與預設樣式,

區塊元素有以下標籤等 :

<div>

<h1> ... <h6>

<p>

<ul>, <ol>, <dl>

<li>, <dt>, <dd>

<table>

<blockquote>

<pre>

<form>

這些元素的特色是上下排列,當本身未設定值時會繼承父元素的值,

比方說設了一個區塊元素的高100px , 沒設寬度的話區塊元素的寬會延伸至瀏覽器內容的寬,

因為這個區塊元素被父層 影響,區塊元素是相當一個矩形容器,能夠隨置入物件的寬高延伸。

至於行內元素就不相同,行內元素的概念比較像文章,是左右排列不會自動斷行,

除了受限於區塊元素之中無法延伸會斷行,行內元素大小會因文字大小而改變,

行內元素的標籤有以下等 :

<a>

<strong>

<em>

<img />

<input>

<abbr>

當然也能依自己的喜好定義標籤樣式,想將區塊元素變成行內元素,

或從行內元素改變至區塊元素只要在 CSS 設定 :

display : inline; //行內

或者

display : block ; //區塊


上一篇
30天分享(17) - 內部CSS & 外部CSS
下一篇
30天分享(19) - CSS3 hack
系列文
HTML5 & CSS328
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言